<template>
    <div id="register">
        <div class="register_box">
            <img src="../../assets/logo.png">            
        </div> 
        <yd-cell-group>
            <yd-cell-item>
                <span slot="left">手&nbsp;&nbsp;&nbsp;机&nbsp;&nbsp;&nbsp;号：</span>
                <yd-input slot="right" required :show-required-icon='false' v-model="phone" ref="phoneName" regex="mobile" placeholder="请输入手机号码"></yd-input>
            </yd-cell-item>
            <!-- <yd-cell-item>
                <span slot="left">用&nbsp;&nbsp;&nbsp;户&nbsp;&nbsp;&nbsp;名：</span>
                <yd-input slot="right" required :show-required-icon='false' v-model="memberName" placeholder="请输入用户名"></yd-input>
            </yd-cell-item> -->
            <yd-cell-item>
                <span slot="left">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</span>
                <yd-input slot="right" type="password" required :show-required-icon='false' v-model="memberPasswd" placeholder="请输入不少于6位的密码"></yd-input>
            </yd-cell-item>
            <!-- <yd-cell-item>
                <span slot="left">确&nbsp;认&nbsp;密&nbsp;码：</span>
                <yd-input slot="right" type="password" required :show-required-icon='false' v-model="memberPasswdConfirm" placeholder="请输入确认密码"></yd-input>
            </yd-cell-item> -->
            <yd-cell-item>
                <span slot="left">手机验证码：</span>
                <input type="text" maxlength="6" slot="right" v-model="phoneCode" placeholder="请输入短信验证码">
                <!-- ↓↓关键代码是这里↓↓ -->
                <yd-sendcode slot="right" init-str="发送验证码" v-model="phoneStart" @click.native="phoneCodeBtn" type="danger" run-str="{%s}S"></yd-sendcode>
                <!-- ↑↑关键代码是这里↑↑ -->
            </yd-cell-item>
            <!-- <yd-cell-item>
                <span slot="left">所&nbsp;属&nbsp;企&nbsp;业：</span>
                <select slot="right" v-model="enterprise"  @change="changeEnterprise()">
                    <option value="1">中粮集团</option>
                    <option value="2">邮件测试</option>
                    <option value="0">其他</option>
                </select>
            </yd-cell-item>
            <yd-cell-item v-if="mailDomain != ''">
                <span slot="left">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：</span>
                <yd-input slot="right" required :show-required-icon='false' v-model="email" ref="emailName" :debug="true" regex="^[^\u4e00-\u9fa5]{0,}$" placeholder="请输入邮箱账号"></yd-input>
                <yd-button slot="right" bgcolor="#fff" color="#4a4a4a">{{mailDomain}}</yd-button>
            </yd-cell-item>
            <yd-cell-item v-if="mailDomain != ''">
                <span slot="left">邮箱验证码：</span>
                <input type="text" maxlength="6" slot="right" v-model="emailCode" placeholder="请输入邮件验证码"> -->
                <!-- ↓↓关键代码是这里↓↓ -->
                <!-- <yd-sendcode slot="right" init-str="发送邮件" v-model="emailStart" @click.native="emailCodeBtn" type="danger" run-str="{%s}S"></yd-sendcode> -->
                <!-- ↑↑关键代码是这里↑↑ -->
            <!-- </yd-cell-item> -->
        </yd-cell-group>
        <div class="register_btn">
            <yd-button size="large" @click.native="register" bgcolor="#ef4f4f" color="#FFF">提交注册</yd-button>
        </div>
        <div class="register_bottom">
            <yd-flexbox>
                <yd-flexbox-item style="text-align:center">点击注册即表示同意
                    <b @click="agreement">《员工关爱平台服务条款》</b>
                </yd-flexbox-item>
            </yd-flexbox>
        </div>
    </div>
</template>

<script>

export default {
    name: 'register',
    data() {
        return {
            memberName: '',
            memberPasswd: '',
            memberPasswdConfirm: '',
            phone: '',
            phoneCode: '',
            phoneStart: false,
            email: '',
            mailDomain: '',
            emailCode: '',
            emailStart: false,
            enterprise: '0'
        }
    },
    created: function() {

    },
    methods: {
        register() {
            // // 用户名、密码CHECK
            // if (this.memberName == '') {
            //     this.$dialog.toast({
            //         mes: '用户不可为空',
            //         timeout: 1500
            //     });
            //     return false;
            // }
            // if (this.memberPasswd == '') {
            //     this.$dialog.toast({
            //         mes: '密码不可为空',
            //         timeout: 1500
            //     });
            //     return false;
            // }
            // if (this.memberPasswdConfirm == '') {
            //     this.$dialog.toast({
            //         mes: '确认密码不可为空',
            //         timeout: 1500
            //     });
            //     return false;
            // }
            // if (this.memberPasswd !== this.memberPasswdConfirm) {
            //     this.$dialog.toast({
            //         mes: '两次输入的密码不一致',
            //         timeout: 1500
            //     });
            //     return false;
            // }
            // 手机号码的有效性CHECK            
            let phoneName = this.$refs.phoneName;
            if (!phoneName.valid) {
                let toastMsg = phoneName.errorMsg;
                // errorCode => NOT_NULL(不能为空)、NOT_MIN_SIZE(输入字符位数不足)、NOT_REGEX_RULE(不符合规则)
                if (phoneName.errorCode == "NOT_NULL") {
                    toastMsg = "手机号"+toastMsg;
                } else {
                    toastMsg = "请输入正确的手机号";
                }
                this.$dialog.toast({
                    mes: toastMsg,
                    timeout: 1500
                });
                return false;
            }
            // 密码CHECK
            if (this.memberPasswd == '') {
                this.$dialog.toast({
                    mes: '密码不可为空',
                    timeout: 1500
                });
                return false;
            }
            if (this.memberPasswd.length < 6) {
                this.$dialog.toast({
                    mes: '密码位数不能少于6位',
                    timeout: 1500
                });
                return false;
            }
            if(/([a-zA-Z]+[0-9]+|[0-9]+[a-zA-Z])/.exec(this.memberPasswd)){
                // return true
            } else {
                this.$dialog.toast({
                    mes: '密码必须是由至少6位的数字和字母组成',
                    timeout: 1500
                });
                return false;
            }
            // 手机验证码CHECK
            if (this.phoneCode == '') {
                this.$dialog.toast({
                    mes: '手机验证码不可为空',
                    timeout: 1500
                });
                return false;
            }
            // // 邮箱的有效性CHECK
            // if (this.mailDomain != '') {
            //     let emailName = this.$refs.emailName;
            //     if (!emailName.valid) {
            //         let toastMsg = emailName.errorMsg;
            //         // errorCode => NOT_NULL(不能为空)、NOT_REGEX_RULE(不符合规则)
            //         if (emailName.errorCode == "NOT_NULL") {
            //             toastMsg = "邮箱"+toastMsg;
            //         } else {
            //             toastMsg = "请输入正确的邮箱地址";
            //         }
            //         this.$dialog.toast({
            //             mes: toastMsg,
            //             timeout: 1500
            //         });
            //         return false;
            //     }
            //     if (this.emailCode == '') {
            //         this.$dialog.toast({
            //             mes: '邮箱验证码不可为空',
            //             timeout: 1500
            //         });
            //         return false;
            //     }
            // }

            let companyId = 0;
            let memberMobile = this.phone;
            // let memberEmail = this.email;

            // if (this.mailDomain != '') {
            //     companyId = this.enterprise;  // 企业ID和 用户属于哪个企业相对应
            //     memberEmail = memberEmail + this.mailDomain;
            //     // 邮箱的@的后面都没有 , 符号
            //     memberEmail = memberEmail + "," + this.emailCode;
            // } else {
            //     memberEmail = "";   // java里面设置为null
            // }

            // 手机号、手机验证码、邮箱验证码都没有 , 符号
            memberMobile = memberMobile + "," + this.phoneCode;
            let member = {
                // memberName: this.memberName,
                memberName: this.phone,     // 用户名使用手机号
                memberMobile: memberMobile,
                // memberEmail: memberEmail,
                companyId: companyId
            }
            
            this.$dialog.loading.open('正在注册');
            // member.memberPasswd 在java端取不到值
            this.$httpAjax.post(this.CONSTANT.wapiBaseUrl + 'member/regist?memberPasswd='+this.memberPasswd, member)
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        if (response.data.msg == 'SUCCESS') {
                            this.$dialog.toast({
                                mes: '恭喜您,注册成功!',
                                timeout: 1500
                            });
                            // 不能使用go(-1)
                            this.$router.replace('/login');    // 注册成功时，跳转账号密码登录
                        } else {
                            this.$dialog.toast({
                                mes: response.data.msg,
                                timeout: 1500
                            });
                        }
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: '注册失败，请稍后重试',
                        icon: 'error',
                        timeout: 1500
                    });
                });
        },
        //短信验证码
        phoneCodeBtn() {
            let phoneName = this.$refs.phoneName;
            if (!phoneName.valid) {
                let toastMsg = phoneName.errorMsg;
                // errorCode => NOT_NULL(不能为空)、NOT_MIN_SIZE(输入字符位数不足)、NOT_REGEX_RULE(不符合规则)
                if (phoneName.errorCode == "NOT_NULL") {
                    toastMsg = "手机号"+toastMsg;
                } else {
                    toastMsg = "请输入正确的手机号";
                }
                this.$dialog.toast({
                    mes: toastMsg,
                    timeout: 1500
                });
                return false;
            }
            this.phoneStart = true;
            this.$dialog.loading.open('发送中...');
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'member/sendCode?channel=' + this.phone + '&type=0')
                .then((response) => {
                    if (response.status == 200) {
                        this.$dialog.loading.close();
                        if (response.data.msg == 'SUCCESS') {
                            this.$dialog.toast({
                                mes: '发送成功',
                                icon: 'success',
                                timeout: 1500
                            });
                        } else {
                            this.$dialog.toast({
                                mes: '发送失败，请联系客服',
                                icon: 'error',
                                timeout: 1500
                            });
                        }
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: '请求错误，请稍后重试',
                        icon: 'error',
                        timeout: 1500
                    });
                });
        },
        changeEnterprise() {
            // 选择中粮时
            if (this.enterprise == 1) {
                this.mailDomain = "@cofco.com";
            } else if (this.enterprise == 2) {
                this.mailDomain = "@163.com";
            } else {
                // 其他
                this.mailDomain = "";
            }
        },
        //发送邮件
        emailCodeBtn() {
            let emailName = this.$refs.emailName;
            if (!emailName.valid) {
                let toastMsg = emailName.errorMsg;
                // errorCode => NOT_NULL(不能为空)、NOT_REGEX_RULE(不符合规则)
                if (emailName.errorCode == "NOT_NULL") {
                    toastMsg = "邮箱账号"+toastMsg;
                } else {
                    toastMsg = "请输入正确的邮箱账号";
                }
                this.$dialog.toast({
                    mes: toastMsg,
                    timeout: 1500
                });
                return false;
            }

            if (this.email.indexOf(",") >= 0) {
                this.$dialog.toast({
                    mes: "输入邮箱账号不能有逗号(,)",
                    timeout: 1500
                });
                return false;
            }

            let mailName = this.email + this.mailDomain;

            this.emailStart = true;
            this.$dialog.loading.open('发送中...');
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'member/sendCode?channel=' + mailName + '&type=1')
                .then((response) => {
                    if (response.status == 200) {
                        this.$dialog.loading.close();
                        if (response.data.msg == 'SUCCESS') {
                            this.$dialog.toast({
                                mes: '发送成功',
                                icon: 'success',
                                timeout: 1500
                            });
                        } else {
                            this.$dialog.toast({
                                mes: '发送失败，请联系客服',
                                icon: 'error',
                                timeout: 1500
                            });
                        }
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: '请求错误，请稍后重试',
                        icon: 'error',
                        timeout: 1500
                    });
                });
        },
        //注册协议
        agreement() {
            this.$router.push('/agreement');
        }
    }
}
</script>

<style scoped>
#register {
    width: 100%;
    /* height: 100%; */
    /* overflow: hidden; */
    background: #fff;
}

.register_box {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.register_box img {
    display: block;
    height: 2.6rem;
    margin: 0.1rem auto;
}

.register_btn {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.24rem;
}

.register_bottom {
    width: 100%;
    box-sizing: border-box;
    line-height: 0.8rem;
    font-size: 12px;
    color: #A1A1A1;
    padding: 0.1rem 0.24rem;
}

.register_bottom b {
    font-weight: 400;
    color: #ef4f4f;
}

.yd-cell-right .yd-btn {
    position: absolute;
    right: 0.24rem;
    top: 0.18rem;
}
</style>